export class Swiper {
    constructor($target) {
        this.target = $target;
        this.picWrap = this.target.find(".pic-wrap");
        this.cricleWrap = this.target.find(".cricle-wrap");
        this.arrow = this.target.find(".arrow");
        this.len = this.picWrap.find(".pic").length;
        this.width = this.picWrap.find(".pic").width();
        this.index = 0;
        this.timer = null;
    }

    init() {
        this.initEvent();
        this.totalLength();
        this.run();
    }

    initEvent() {
        this.arrow.on("click", { that: this }, this.arrowClickBtn);
        this.cricleWrap.find('.cricle').on("click", { that: this }, this.cricleClickBtn);
        this.target.on("mouseenter", { that: this }, this.mouseentEvent)
        this.target.on("mouseleave", { that: this }, this.mouseleaveEvent)
    }

    totalLength() {
        this.picWrap.css({ "width": this.len * this.width })
        this.picWrap.find(".pic").each(function(index, item) {
            $(item).attr("index", index);
        })
    }

    arrowClickBtn(e) {
        let that = e.data.that;

        if ($(this).hasClass("left-arrow")) {
            that.index = that.index <= 0 ? that.len - 1 : --that.index;
            that.picWrap.prepend(that.picWrap.find(".pic:last-child"))
            that.picWrap.css({ "margin-left": -that.width })
            that.picWrap.animate({
                marginLeft: 0
            }, 1000)
            that.cricleWrap.find('.cricle').eq(that.index).addClass("active").siblings(".active").removeClass("active");
        } else {
            that.index = ++that.index % that.len;
            that.picWrap.animate({
                marginLeft: -that.width
            }, 1000, function() {
                that.picWrap.css({ "margin-left": 0 })
                that.picWrap.append(that.picWrap.find(".pic:nth-child(1)"))
            })
            that.cricleWrap.find('.cricle').eq(that.index).addClass("active").siblings(".active").removeClass("active");
        }
    }

    cricleClickBtn(e) {
        let that = e.data.that;
        let currenIndex = $(this).index();
        let oldIndex = that.picWrap.find(".pic").attr("index");
        let copyTem = that.picWrap.find(".pic:nth-child(1)").clone();
        let arr = [];

        if (currenIndex > oldIndex) {
            for (let i = 0; i < currenIndex - oldIndex; i++) {
                arr.push($('.pic').eq(i))
            }
            that.picWrap.append(arr)
            that.picWrap.find(".pic:nth-child(1)").before(copyTem)
            that.picWrap.animate({
                marginLeft: -that.width
            }, 1000, function() {
                copyTem.remove()
                $(this).css({ "margin-left": 0 })
            })
        } else {
            for (let i = 0; i < oldIndex - currenIndex; i++) {
                arr.unshift($(`.pic:nth-child(${that.len-i})`))
            }
            that.picWrap.prepend(arr)
            that.picWrap.find(".pic:nth-child(1)").after(copyTem)
            that.picWrap.css({ "margin-left": -that.width })
            that.picWrap.animate({
                marginLeft: 0
            }, 1000, function() {
                copyTem.remove()
            })
        }

        $(this).addClass("active").siblings(".active").removeClass("active");
    }

    run() {
        this.timer = setInterval(function() {
            $(".right-arrow").trigger("click")
        }, 2000)
    }
    mouseentEvent(e) {
        let that = e.data.that;
        clearInterval(that.timer)
    }
    mouseleaveEvent(e) {
        let that = e.data.that;
        that.run();
    }

}